<template>
    <div class="lb-cover-wrap">
        <div v-if='type==="single"' class="lb-cover" @click="showUploadModel">
            <lb-image  v-if="cover.length > 0" :src="cover[cover.length - 1].url" />
            <i v-else class="el-icon-plus"></i>
            <i v-if="cover.length > 0" @click.stop="deleteCover" class="el-icon-circle-close"></i>
        </div>
        <div v-else-if="type === 'more'" class="lb-upload-more">
            <div class="more-item" v-for="(item,index) in cover" :key='index'>
                <lb-image :src="item.url" />
                <div class="mask">
                    <i @click="lookBigImg(item.url)" class="el-icon-zoom-in"></i>
                    <i @click="delImg(index)" class="el-icon-delete"></i>
                </div>
            </div>
            <div class="up-item" @click="showUploadModel"><i class="el-icon-plus"></i></div>
            <el-dialog
            :visible.sync="centerDialogVisible"
            width="800px"
            center>
            <div class="dialog-inner-img"><lb-image class="dialog-img" :src="viewImg" /></div>
            </el-dialog>
        </div>
        <lb-button type='primary' size='mini' @click="showUploadModel" v-else>选择</lb-button>
        <lb-upload :visibles.sync='showUpload' :fileType='fileType'  @selectedFiles='selectedFiles'></lb-upload>
    </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'single'
    },
    fileType: {
      type: String,
      default: 'image'
    },
    fileList: {
      type: [Array, String]
    }
  },
  data () {
    return {
      showUpload: false,
      cover: [],
      centerDialogVisible: false,
      viewImg: '',
      limit: 5
    }
  },
  created () {
    if (this.fileList && this.fileList.length) {
      this.cover = this.fileList
    }
  },
  methods: {
    selectedFiles (img) {
      this.cover = img
      this.$emit('selectedFiles', img)
    },
    showUploadModel () {
      this.showUpload = true
    },
    lookBigImg (url) {
      this.viewImg = url
      this.centerDialogVisible = true
    },
    delImg (index) {
      this.cover.splice(index, 1)
    },
    deleteCover () {
      this.cover = []
      this.$emit('selectedFiles', [])
    }
  },
  watch: {
    fileList: {
      deep: true,
      handler (val) {
        if (val && typeof val === 'object') { this.cover = val }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-cover-wrap{
    display: inline-block;
    .lb-cover{
        width: 140px;
        height: 140px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
        overflow: hidden;
        position: relative;
        .el-image{
            width: 140px;
            height: 140px;
        }
        i{
            font-size: 26px;
            line-height: 140px;
        }
        &:hover{
            border: 1px dashed #09f;
            .el-icon-circle-close{
              display: inline-block;
            }
        }
        .el-icon-circle-close{
          display: none;
          z-index: 10;
          position: absolute;
          right: 5px;
          top: 5px;
          line-height: 1;
        }
    }
    .lb-upload-more{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .more-item{
            width: 140px;
            height: 140px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            position: relative;
            margin-right: 10px;
            margin-bottom: 10px;
            overflow: hidden;
            .el-image{
                width: 140px;
                height: 140px;
                z-index: 5;
            }
            .mask{
                display: none;
                position: absolute;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.5);
                font-size: 20px;
                color: #fff;
                justify-content: center;
                align-items: center;
                z-index: 10;
                top: 0;
                left: 0;
                i{
                    margin: 0 10px;
                    cursor: pointer;
                }
            }
            &:hover {
                .mask{
                    display: flex;
                }
            }
        }
        .up-item{
            width: 140px;
            height: 140px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            text-align: center;
            i{
                font-size: 26px;
                line-height: 140px;
            }
            &:hover{
                border: 1px dashed #09f;
            }
        }
    }
    .dialog-inner-img{
        display: flex;
        justify-content: center;
        align-items: center;
        .dialog-img{
            width: 100%;
        }
    }
}
</style>
